<template>
 <div >
  <!-- 御剑乘风来,除魔天地间!===app -->
  <TodoHeader @addE="add"></TodoHeader>
  <TodoMain :list="list" @del="delHandel"></TodoMain>
  <!-- <TodoFooter :list="list" @handelC="clear"></TodoFooter> -->
  <TodoFooter :list="list" @handelC="list=[]"></TodoFooter>
  
 </div>
</template>
<script>
import TodoHeader from './tex/TodoHeader.vue'
import TodoMain from './tex/TodoMain.vue'
import TodoFooter from './tex/TodoFooter.vue'
export default{
    name:'',
    components:{
      TodoHeader,
      TodoMain,
      TodoFooter

    },
    data () {
        return {
          // list:[
          //   {id:1,name:'跑步100米'},
          //   {id:2,name:'跑步300米'},
          //   {id:3,name:'跑步400米'},
          // ]   
          // 持久化:每次数据添加清空本地数据也会变化
          //取:本地有就本地取,没有就取默认数据
          list:JSON.parse(localStorage.getItem('list'))||[
            {id:1,name:'跑步100米'},
            {id:2,name:'跑步300米'},
            {id:3,name:'跑步400米'},
          ]
        }
    },
    created () {
    },
    computed:{
    },
    methods:{
      add(e){
        console.log(e,999);
        this.list.push(e)
      },
      // clear(e){
      //   this.list=[]
      // }
      //删除事件:e就是子TodoMain删除事件传递过来的参数
      delHandel(e){
        this.list=this.list.filter(ele=>{
          return ele.id!=e
        })
      }
    },
    watch:{
      //只要list数据变化就存
      list(newVal){
        localStorage.setItem('list',JSON.stringify(newVal))
      }

    }
}
</script>
<style lang='less'  scoped>
    
</style>
